<!DOCTYPE HTML>
<html>
    <head>
        <title>Example</title>
        <meta name="author" content="Adam Freeman"/>
        <meta name="description" content="A simple example"/>
        <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon" />
        <style>
            pre {border: medium double black;}
        </style>
    </head>
    <body>
        
        <pre id="results"></pre>
        <p id="tblock">
            There are lots of different kinds of fruit - there are over 500 varieties
            of <span id="banana">banana</span> alone. By the time we add the countless
            types of <span id="apple">apples</span>,
            <span="orange">oranges</span="orange">, and other well-known fruit, we are
            faced with thousands of choices. 
        </p>
        <img id="apple" class="fruits images" name="apple"  src="../images/apple.png" alt="apple"/>
        <img id="banana" src="../images/banana-small.png" alt="small banana"/>       
        <p>
            One of the most interesting aspects of fruit is the variety available in
            each country. I live near London, in an area which is known for
            its apples.
        </p>
        <p>
            <button id="parent">Parent</button>
            <button id="child">First Child</button>
            <button id="prev">Prev Sibling</button>
            <button id="next">Next Sibling</button>
        </p>
 
        <script>
            //通过id找到pre元素
            var resultsElem = document.getElementById("results");
            // 返回文档中的body元素
            var element = document.body;
            // 获取所有的button元素
            var buttons = document.getElementsByTagName("button");
            for (var i = 0; i < buttons.length; i++) {
                // 所有的button元素点击事件执行handleButtonClick()函数
                buttons[i].onclick = handleButtonClick;
            }
            // 执行processNewElement()函数
            // processNewElement(element);

            function handleButtonClick(e) {
                // 返回element的style
                
                if (element.style) {
                    // 背景色设为白色
                    element.style.backgroundColor = "white";
                }
                // 如果按钮的id为parent 并且element 不是body
                if (e.target.id == "parent" && element != document.body) {
                    //element改为他的父节点
                    element = element.parentNode;
                    // 如果按钮的id为child 并且element 有子元素节点
                } else if (e.target.id == "child" && element.hasChildNodes()) {
                    // 改为他的第一个子元素
                    element = element.firstChild;
                    if(element.style)
                    console.log(123);
                    // 如果按钮的id为prev 并且element当前元素之前的兄弟元素
                } else if (e.target.id == "prev" && element.previousSibling) {
                    // 改为他的前面的兄弟元素
                    element = element.previousSibling;
                    // 如果按钮的id为next 并且element当前元素之后的兄弟元素
                } else if (e.target.id == "next" && element.nextSibling) {
                    // 改为他的后面的兄弟元素
                    element = element.nextSibling;
                    if(element.style)
                    console.log(123);
                }
                // 输出该元素的所有信息
                processNewElement(element);
                // 如果element.style
                if (element.style) {
                    element.style.backgroundColor = "lightgrey";
                }
            }
            
            function processNewElement(elem) {
                resultsElem.innerHTML = "Element type: " + elem + "\n";
                resultsElem.innerHTML += "Element id: " + elem.id + "\n";
                resultsElem.innerHTML += "Has child nodes: "
                    + elem.hasChildNodes() + "\n";
                if (elem.previousSibling) {
                    resultsElem.innerHTML += ("Prev sibling is: "
                         + elem.previousSibling + "\n");
                } else {
                    resultsElem.innerHTML += "No prev sibling\n";
                }
                if (elem.nextSibling) {
                    resultsElem.innerHTML += "Next sibling is: "
                        + elem.nextSibling + "\n";
                } else {
                    resultsElem.innerHTML += "No next sibling\n";
                }
            }
        </script>
    </body>
</html>
